<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>ArcGIS GeoJSON Layer</title>
<link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
<!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style>
    html, body, #mapDiv {
      height: 100%;
      width: 100%;
    }
    @media (max-width: 600px) {
        .panel-fixed {
            width: 250px;
        }
    }
</style>

<!-- ArcGIS API for JavaScript library references -->
<script src="//js.arcgis.com/3.10"></script>

<!-- Terraformer reference -->
<script src="./vendor/terraformer/terraformer.min.js"></script>
<script src="./vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>

<script>
    require(["esri/map",
        "./src/geojsonlayer.js",
        "esri/renderers/SimpleRenderer",
        "dojo/on",
        "dojo/query",
        "dojo/dom",
        "dojo/domReady!"],
      function (Map, GeoJsonLayer, SimpleRenderer, on, query, dom) {

        // Create map
        var map = new Map("mapDiv", {
            basemap: "gray",
            center: [-122.5, 45.5],
            zoom: 5
        });

        map.infoWindow.domNode.className += " light";

        map.on("load", function () {
            addGeoJsonLayer("./data/dc-school-zones.json");
        });

        function selectGeoJsonData(e) {
            var url;
            // Get the user input
            if (e.target.nodeName === "SELECT") {
                url = dom.byId("geoJsonUrl").value = e.target.options[e.target.selectedIndex].value;
            } else {
                url = dom.byId("geoJsonUrl").value;
            }
            // Add the layer
            addGeoJsonLayer(url);
        }

        function addGeoJsonLayer(url) {
            // Create the layer
            var geoJsonLayer = new GeoJsonLayer({
                url: url // ./data/dc-schools.json
            });

            //Optional SimpleRenderer if you don't want a random symbol and color
            // var simpleJson = {
            //     "type": "simple",
            //     "label": "",
            //     "description": "",
            //     "symbol": {
            //         "color": [210,105,30,191],
            //         "size": 10,
            //         "angle": 0,
            //         "xoffset": 0,
            //         "yoffset": 0,
            //         "type": "esriSLS" // esriSMS, esriSLS
            //     }
            // };
            // geoJsonLayer.renderer = new SimpleRenderer(simpleJson);

            // Zoom to layer
            geoJsonLayer.on("update-end", function (e) {
                map.setExtent(e.target.extent.expand(1.2));
            });
            // Add to map
            map.addLayer(geoJsonLayer);

        }

        function removeAllLayers() {
            var i, lyr, ids = map.graphicsLayerIds;
            for (i = ids.length -1; i > -1; i--) {
                lyr = map.getLayer(ids[i]);
                map.removeLayer(lyr);
            }
            map.infoWindow.hide();
        }

        // Wire UI events
        on(dom.byId("selGeoJson"), "change", selectGeoJsonData);
        on(dom.byId("btnAdd"), "click", selectGeoJsonData);
        on(dom.byId("btnRemove"), "click", removeAllLayers);

        // Toggle panel
        on(query(".panel-heading")[0], "click", function () {
            if (query(".glyphicon.glyphicon-chevron-up")[0]) {
                query(".glyphicon").replaceClass("glyphicon-chevron-down", "glyphicon-chevron-up");
                query(".panel-body.collapse").removeClass("in");
            } else {
                query(".glyphicon").replaceClass("glyphicon-chevron-up", "glyphicon-chevron-down");
                query(".panel-body.collapse").addClass("in");
            }
        });
    });
</script>
</head>
<body>
    <div class="panel panel-primary panel-fixed">
        <div class="panel-heading">
            <h3 class="panel-title">ArcGIS GeoJSON Layer</h3>
            <button id="chevron" class="btn btn-primary btn-xs btn-absolute">
                <span class="glyphicon glyphicon-chevron-up"></span>
            </button>
        </div>
        <div class="panel-body collapse in">
            <p>Load GeoJSON into the map as a layer. <a href="https://github.com/esri/Terraformer">Terraformer</a> is used to convert GeoJSON to ArcGIS JSON.</p>
            <div class="form text-left">
                <div class="form-group">
                    <label class="control-label">Sample Data</label>
                    <select class="form-control" id="selGeoJson">
                        <option value="./data/dc-school-zones.json">GeoJSON File - D.C. School Zones</option>
                        <option value="./data/dc-metro-lines.json">GeoJSON File - D.C. Metro Lines</option>
                        <option value="./data/dc-bike-share.json">GeoJSON File - D.C. Bike Shares</option>
                        <option value="./data/canada.json">GeoJSON File - Canada</option>
                        <option value="./data/usa.json">GeoJSON File - USA</option>
                        <option value="http://koop.dc.esri.com/github/colemanm/hurricanes/fl_2004_hurricanes.json">Koop Server - Hurricanes</option>
                        <option value="http://geeknixta.com/json/DEMOGRAPHICS_Blocks2010.geojson">Nixta's Server - Demographics</option>
                        <option value="http://geonode.geeknixta.com/citybikes/rest/services/citibikenyc/FeatureServer/0/query?f=geojson">Nixta's Server - NY Bikes</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="control-label">Your Data <a target="_blank" href="https://developers.arcgis.com/javascript/jshelp/ags_proxy.html">(URL/File/CORS Server)</a></label>
                    <div class="input-group">
                      <input type="text" class="form-control" id="geoJsonUrl" value="./data/dc-school-zones.json" placeholder="./data/dc-school-zones.json">
                      <span class="input-group-btn">
                        <button id="btnAdd" class="btn btn-success" type="button">Load</button>
                      </span>
                    </div>
                </div>

                <div class="form-group text-center">
                    <button id="btnRemove" class="btn btn-default btn-block">Clear All</button>
                </div>
            </div>
        </div>
    </div>
    <div id="mapDiv"></div>
</body>
</html>
